<template>
    <div>
        <h1 class="home-h1">home</h1>
        <div>{{userInfo.name}} - {{userInfo.address}}</div>
        <div></div>
    </div>
</template>

<script>
import {computed,ref} from 'vue';
import { useStore} from 'vuex';
export default {
    name:"Home",
    setup(){
        const { commit,getters } = useStore();
        const num =  ref(1);
        const userInfo = computed(()=>getters['demo/getData']);
        const fetchData =()=>{
            return new Promise((resolve,reject)=>{
                num.value = 2;
                commit("demo/setData",{name:'LockingReal',address:"第七宇宙"});
                console.log(getters['demo/getData']);
                resolve(true);
            })
        };
        if(userInfo.value.name == 'GeekReal'){
            console.log("27");
            fetchData();
        }
        return {
            userInfo,
            fetchData
        }
    },
    serverPrefetch(){
        this.fetchData();
    }
}
</script>

<style scoped>
    .home-h1{
        color:red;
    }
</style>
